import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hitutor/Util/Global.dart';
import 'package:hitutor/Util/HttpGo.dart';
import 'package:hitutor/Util/MyColor.dart';
import 'package:hitutor/Util/PageUtil.dart';
import 'package:hitutor/Widget/MyButton.dart';
import 'package:hitutor/Widget/MyDialog.dart';
import 'package:hitutor/Widget/MyImage.dart';
import 'package:hitutor/Widget/MyInput.dart';
import 'package:hitutor/Widget/Star.dart';

class CommentTeacher extends StatefulWidget {
  dynamic lessonId;
  dynamic classroomId;
  List<dynamic> commentWords;
  Function() commentCallback;

  CommentTeacher({required this.lessonId, required this.classroomId, required this.commentWords, required this.commentCallback});

  @override
  State<StatefulWidget> createState() {
    return _CommentTeacher();
  }
}

class _CommentTeacher extends State<CommentTeacher> {
  TextEditingController commentController = TextEditingController();
  List<String> selectWords = [];
  int systemStar = 5;
  int teacherStar = 5;

  publicComment() {
    String comment = commentController.text;
    for (var item in selectWords) {
      comment = comment + "\n$item";
    }
    HttpGo(context).post("/HiNote/UpdateClassComment", {
      "lessonId": widget.lessonId,
      "classroomId": widget.classroomId,
      "systemScore": systemStar,
      "teachScore": teacherStar,
      "comment": comment
    }, (data) {
      widget.commentCallback();
      PageUtil().back(context);
    }, (code, error) => showToast(error));
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> words = [];
    for (var item in widget.commentWords) {
      words.add(Tag(item, onSelected: (bool selected) {
        selected ? selectWords.add(item) : selectWords.remove(item);
      }));
    }
    return Container(
        decoration: Global.getWhiteBg(8),
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        child: SingleChildScrollView(
            child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [
          Align(
              alignment: Alignment.centerRight,
              child: LocalImage("cross_gray.png", width: 20, height: 20, padding: EdgeInsets.symmetric(vertical: 5), onTap: () {
                PageUtil().back(context);
              })),
          Text("關於這次上課的體驗，請您幫我們評分", style: TextStyle(color: MyColor.Black)),
          Container(height: 12),
          Row(children: [
            Text("1. 系統體驗 ", style: TextStyle(color: MyColor.Orange, fontWeight: FontWeight.bold, fontSize: 15)),
            OrgStar(onChoose: (star) => systemStar = star)
          ]),
          Container(height: 12),
          Row(children: [
            Text("2. 老師授課 ", style: TextStyle(color: MyColor.Orange, fontWeight: FontWeight.bold, fontSize: 15)),
            OrgStar(onChoose: (star) => teacherStar = star)
          ]),
          Container(height: 12),
          Text("3. 評語&建議", style: TextStyle(color: MyColor.Orange, fontWeight: FontWeight.bold, fontSize: 15)),
          Container(
              decoration: Global.getBg(Color(0xfffff6f1), 0),
              margin: EdgeInsets.symmetric(vertical: 12),
              padding: EdgeInsets.all(8),
              child: NormalInput(fontColor: MyColor.C7D, maxLines: 0, controller: commentController)),
          Wrap(spacing: 12, runSpacing: 12, children: words),
          Container(
              margin: EdgeInsets.symmetric(vertical: 24),
              alignment: Alignment.center,
              child: Button("送出", width: 64, height: 32, bgColor: MyColor.Orange, onTap: publicComment))
        ])));
  }
}

class Tag extends StatefulWidget {
  String text;
  Function(bool selected) onSelected;

  Tag(this.text, {required this.onSelected});

  @override
  State<StatefulWidget> createState() {
    return _Tag();
  }
}

class _Tag extends State<Tag> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        selected = !selected;
        setState(() {});
        widget.onSelected(selected);
      },
      child: Container(
          decoration: selected ? Global.getBg(MyColor.Orange, 20) : Global.getBorderBg(MyColor.Orange, 20),
          padding: EdgeInsets.all(6),
          child: Text("${widget.text}",
              style: TextStyle(fontSize: 14, color: selected ? Colors.white : MyColor.Orange, fontWeight: FontWeight.bold))),
    );
  }
}
